<template>
  <div>
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <icons :list="iconlist"></icons>
    <recommend :list="recommendList"></recommend>
    <weekend :list='weekendList'></weekend>
  </div>
</template>
<script>
import homeHeader from "./components/header";
import homeSwiper from "./components/swiper";
import icons from "./components/icons";
import recommend from "./components/recommend";
import weekend from "./components/weekend";
import axios from "axios";
import { mapState } from 'vuex'
export default {
  name: "home",
  components: { homeHeader, homeSwiper, icons, recommend, weekend },
  data: function() {
    return {
      lastcity:'',
      swiperList: [],
      iconlist: [],
      recommendList: [],
      weekendList:[]
    };
  },
  mounted: function() {
    this.lastcity = this.city
    this.getHomeInfo();
  },
  activated(){
     if(this.lastcity!==this.city){
       this.getHomeInfo();
       this.lastcity = this.city
     }
  },
  computed:{
    ...mapState(['city'])
  },
  methods: {
    getHomeInfo: function() {
      axios.get("/api/index.json"+'?city='+this.city).then(this.getInfoSucc);
    },
    getInfoSucc: function(res) {
      console.log("----------");
      if (res.data) {
       
        this.swiperList = res.data.swiperList;
        this.iconlist = res.data.iconlist;
        this.recommendList = res.data.recommendList;
        this.weekendList = res.data.weekendList;

        console.log("swiperlist的值是", this.swiperList);
      }
    }

  }
};
</script>
<style>
h1 {
  color: aqua;
}
</style>


